$speed:2.5s;

.frame{
    position: absolute;
    width: 400px;
    height: 400px;
    inset: 0;
    margin: auto;
    box-shadow: 1px 2px 10px rgba(0,0,0,0.3);
    background-color: #dd3c54;
    border-radius: 2px;
    overflow: hidden;
}

.bell{
    position: absolute;
    fill: #fff;
    inset: 0;
    margin: auto;
    animation: shake $speed ease infinite;
    transform-origin: 50% 0%;
}

.line{
    fill: none;
    stroke-width: 2;
    stroke: #fff;
    stroke-linecap: round;
}

.line-1, 
.line-2, 
.line-3{
    position: absolute;
    top: 170px;
    left: 230px;
}

.line-4, 
.line-5, 
.line-6{
    position: absolute;
    top: 170px;
    right: 230px;
}

@for $i from 1 through 6{
    .line-#{$i}{
        animation: line-#{$i} $speed ease-out infinite;
    }
}


@keyframes shake {
    0%,50%,100%{
        transform: rotate(0);
    }
    5%,10%,15%,20%,25%,30%,35%,40%{
        transform: rotate(6deg);
    }
    45%{
        transform: rotate(4deg);
    }
    7.5%,12.5%,17.5%,22.5%,27.5%,32.5%,37.5%,42.5%{
        transform:rotate(-6deg);
    }
    47.5%{
        transform: rotate(-2deg);
    }
}

@keyframes line-1 {
    0%{
        transform: translateX(0) scale(1);
        opacity: 1;
    }
    50%,100%{
        transform: translateX(60px) scale(2);
        opacity: 0;
    }
}

@keyframes line-2 {
    0%,19%{
        opacity: 0;
    }
    20%{
        transform: translateX(0) scale(1);
        opacity: 1;
    }
    70%,100%{
        transform: translateX(60px) scale(2);
        opacity: 0;
    }
}

@keyframes line-3 {
    0%,39%{
        opacity: 0;
    }
    40%{
        transform: translateX(0) scale(1);
        opacity: 1;
    }
    90%,100%{
        transform: translateX(60px) scale(2);
        opacity: 0;
    }
}

@keyframes line-4 {
    0%{
        transform: translateX(0) scale(1);
        opacity: 1;
    }
    50%,100%{
        transform: translateX(-60px) scale(2);
        opacity: 0;
    }
}

@keyframes line-5 {
    0%,19%{
        opacity: 0;
    }
    20%{
        transform: translateX(0) scale(1);
        opacity: 1;
    }
    70%,100%{
        transform: translateX(-60px) scale(2);
        opacity: 0;
    }
}

@keyframes line-6 {
    0%,39%{
        opacity: 0;
    }
    40%{
        transform: translateX(0) scale(1);
        opacity: 1;
    }
    90%,100%{
        transform: translateX(-60px) scale(2);
        opacity: 0;
    }
}